<template>
	<div>
		<m-table name="admin-answer" :action="action" :search="[]" ref="table" :params="params">
			<el-table-column label="问题类型" width="180">
				<template slot-scope="scope">
					{{ typeName(scope.row.type) }}
				</template>
			</el-table-column>

			<el-table-column label="标题" prop="title" width="380">
				<template slot-scope="scope">
					{{ scope.row.title }}
				</template>
			</el-table-column>

			<el-table-column label="必答" prop="title" width="180">
				<template slot-scope="scope">
					{{ scope.row.isRequired ? '是' : '否' }}
				</template>
			</el-table-column>

			<el-table-column label="选项" prop="content">
				<template slot-scope="scope">
					<div v-for="(item, index) in scope.row.options" :key="item.id">{{ eng[index] }} : {{ item.info }}</div>
				</template>
			</el-table-column>

			<template slot="params">
				<el-form-item label="选项" prop="options"  v-if="answerType == 0 || answerType == 1">
					<el-button type="success" @click="addOption">添加</el-button>
						<el-row style="margin-top: 10px;" :gutter="24" v-for="(item,index) in answerOptions" :key="index">
							<el-col :span="16">
								<el-input placeholder="请输入选项内容" v-model="item.info"></el-input>
							</el-col>
							<el-col :span="8">
								
								<el-button type="success" @click="removeOption(index)">删除</el-button>
							</el-col>
						</el-row>
				</el-form-item>
			</template>
		</m-table>
	</div>
</template>
    
<script>
import request from '@/utils/request';
const types = [
	{ id: 0, name: '单选题' },
	{ id: 1, name: '多选题' },
	{ id: 2, name: '简答题' },
];
export default {
	data() {
		return {
			types: types,
			eng: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			action: { remove: true, edit: true, add: true, export: false },
			params: [
				{ name: 'id', value: '', hide: true },
				{ name: 'type', value: '', label: '题目类型', type: 'select', data: types },
				{ name: 'title', value: '', label: '标题', type: 'string' },
				{ name: 'isRequired', value: '', label: '是否必答', type: 'bool' },
				{ name: 'options', value: '', hide: true },
			],
		};
	},
	computed: {
		answerType() {
			return this.params.find((x) => x.name == 'type').value;
		},
		answerOptions() {
			return this.params.find((x) => x.name == 'options').value;
		},
	},
	methods: {
		typeName(e) {
			try {
				return this.types.find((x) => x.id == e).name;
			} catch (error) {
				return '未知';
			}
		},
		addOption(){
			let options = this.answerOptions || [];
			console.log(options);
			options.push({ info: '' , answerId : 0 });
			this.params.find((x) => x.name == 'options').value = options;
		},
		removeOption(index){
			let options = this.answerOptions;
			options.splice(index, 1);
			this.params.find((x) => x.name == 'options').value = options;
		}
	},
};
</script>
    
